<template>
  <div class="c-reset-password">
    <div class="u-title">重置密码</div>
    <mivaInput
      isShow="true"
      v-bind="sign"
      v-model="sign.value"
      placeholder="请输入邮箱/手机号"
      @input="verifyCheckSign"
    />
    <mivaInput
      isShow="true"
      v-bind="password"
      v-model="password.value"
      type="password"
      placeholder="请输入新密码"
      :show-password="true"
      @input="verifyCheckPassword"
    />
    <inputVerifycode
      isShow='true'
      :verifycode="verifycode"
      :sign="sign"
      placeholder="请输入验证码"
      @click="getVerifycode"
    />
    <itemButton
      class="b-reset-password"
      v-html="`重设密码`"
      @click="$store.dispatch('form/resetPassword')"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import inputVerifycode from './input-verifycode.vue';
import itemButton from './item-button.vue';
import mivaInput from './miva-input.vue';
import {
  verifyCheckPassword,
  verifyCheckSign,
  getVerifycode,
} from './utils/verify';

export default {
  name: 'RestPassword',
  components: {
    inputVerifycode,
    itemButton,
    mivaInput,
  },
  computed: {
    ...mapGetters(['password', 'sign', 'verifycode']),
  },
  methods: {
    async verifyCheckPassword() {
      await verifyCheckPassword(this);
    },
    async verifyCheckSign() {
      await verifyCheckSign(this);
    },
    async getVerifycode() {
      await getVerifycode(this);
    },
  },
};
</script>


<style lang="less" scoped>
@import '~@/styles/variables.less';

.c-reset-password {
  max-width: 414px;
  margin: auto;
  padding-top: 50px;
  .u-title {
    display: inline-block;
    padding: 0 10px;
    font-size: 40px;
    font-weight: bold;
    background-color: @darkenBackground;
    box-shadow: -1px 1px 3px #000;
    transform: translateX(-70px) rotateZ(-10deg) skewY(-10deg);
    margin-bottom: 30px;
    &::before {
      content: '';
      display: inline-block;
      width: 30px;
      height: 55px;
      margin-right: 5px;
      background-color: #fff;
      box-shadow: -1px 1px 3px #000;
    }
  }
}
.b-reset-password {
  margin-top: 10px;
  position: relative;
  border: 1px solid @navButton;
  font-weight: bold;
  background: transparent;
  color: @navText;
  transition: all 1s;
  z-index: 1;
  background-color: @navButton;
}
</style>
